<template>
	<view class="product-detail">
		<!-- 商品图片轮播 -->
		<swiper class="product-swiper" indicator-dots autoplay circular>
			<swiper-item v-for="(img, index) in product.images" :key="index">
				<image class="product-image" :src="img" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<!-- 商品基本信息 -->
		<view class="product-info">
			<view class="price-section">
				<text class="current-price">¥{{product.price}}</text>
				<text class="original-price" v-if="product.originalPrice">¥{{product.originalPrice}}</text>
				<text class="discount" v-if="product.discount">{{product.discount}}折</text>
			</view>
			<text class="product-name">{{product.name}}</text>
			<text class="product-desc">{{product.description}}</text>
			<view class="sales-info">
				<text>月销{{product.monthlySales}}份</text>
				<text>好评率{{product.rating}}%</text>
			</view>
		</view>

		<!-- 规格选择 -->
		<view class="spec-section" v-if="product.specs.length > 0">
			<view class="section-title">规格选择</view>
			<view class="spec-list">
				<view class="spec-item" 
					v-for="spec in product.specs" 
					:key="spec.id"
					:class="{active: selectedSpec.id === spec.id}"
					@click="selectSpec(spec)">
					<text>{{spec.name}}</text>
					<text class="spec-price">+¥{{spec.price}}</text>
				</view>
			</view>
		</view>

		<!-- 商品详情 -->
		<view class="detail-section">
			<view class="section-title">商品详情</view>
			<rich-text class="detail-content" :nodes="product.detail"></rich-text>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="bar-left">
				<view class="action-btn" @click="navigateToHome">
					<text class="btn-icon">🏠</text>
					<text class="btn-text">首页</text>
				</view>
				<view class="action-btn" @click="addToFavorites">
					<text class="btn-icon">{{isFavorited ? '❤️' : '🤍'}}</text>
					<text class="btn-text">{{isFavorited ? '已收藏' : '收藏'}}</text>
				</view>
				<view class="action-btn" @click="navigateToCart">
					<text class="btn-icon">🛒</text>
					<text class="btn-text">购物车</text>
					<view class="cart-badge" v-if="cartCount > 0">{{cartCount}}</view>
				</view>
			</view>
			<view class="bar-right">
				<button class="add-cart-btn" @click="addToCart">加入购物车</button>
				<button class="buy-now-btn" @click="buyNow">立即购买</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 商品数据
const product = ref({
	id: 1,
	name: '经典奶茶',
	description: '醇香浓郁的经典奶茶，选用优质茶叶和新鲜牛奶制作',
	price: '15.00',
	originalPrice: '18.00',
	discount: '8.3',
	monthlySales: '256',
	rating: '98',
	images: [
		'/static/goods/goods01.jpg',
		'/static/goods/goods02.jpg',
		'/static/goods/goods03.jpg'
	],
	specs: [
		{ id: 1, name: '标准糖', price: '10.00' },
		{ id: 2, name: '少糖', price: '12.00' },
		{ id: 3, name: '无糖', price: '13.00' },
		{ id: 4, name: '加珍珠', price: '21.00' },
		{ id: 5, name: '加椰果', price: '31.00' }
	],
	detail: '<p><img src="/static/goods/goods01.jpg" />商品详情内容...</p>'
})

const selectedSpec = ref(product.value.specs[0])
const isFavorited = ref(false)
const cartCount = ref(2)

// 计算总价
const totalPrice = computed(() => {
	const basePrice = parseFloat(product.value.price)
	const specPrice = parseFloat(selectedSpec.value.price)
	return (basePrice + specPrice).toFixed(2)
})

// 方法
const selectSpec = (spec) => {
	selectedSpec.value = spec
}

const addToFavorites = () => {
	isFavorited.value = !isFavorited.value
	uni.showToast({
		title: isFavorited.value ? '收藏成功' : '取消收藏',
		icon: 'success'
	})
}

const addToCart = () => {
	uni.showToast({
		title: '已加入购物车',
		icon: 'success'
	})
	cartCount.value++
}

const buyNow = () => {
	uni.navigateTo({
		url: `/pages_shopcar/submitOrder/index?productId=${product.value.id}&specId=${selectedSpec.value.id}`
	})
}

const navigateToHome = () => {
	uni.switchTab({
		url: '/pages/index/index'
	})
}

const navigateToCart = () => {
	uni.switchTab({
		url: '/pages/shopcar/index'
	})
}

onLoad((options) => {
	console.log('商品详情页面加载', options)
	// 根据商品ID加载商品数据
})
</script>

<style scoped>
.product-detail {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 120rpx;
}

/* 商品图片轮播 */
.product-swiper {
	height: 800rpx;
	background: white;
}

.product-image {
	width: 100%;
	height: 100%;
}

/* 商品基本信息 */
.product-info {
	background: white;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.price-section {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.current-price {
	font-size: 48rpx;
	color: #ff6b6b;
	font-weight: bold;
	margin-right: 20rpx;
}

.original-price {
	font-size: 28rpx;
	color: #999;
	text-decoration: line-through;
	margin-right: 20rpx;
}

.discount {
	background: #ff6b6b;
	color: white;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
}

.product-name {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 15rpx;
}

.product-desc {
	font-size: 28rpx;
	color: #666;
	display: block;
	margin-bottom: 20rpx;
}

.sales-info {
	display: flex;
	gap: 30rpx;
}

.sales-info text {
	font-size: 24rpx;
	color: #999;
}

/* 规格选择 */
.spec-section {
	background: white;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
}

.spec-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.spec-item {
	border: 2rpx solid #ddd;
	border-radius: 10rpx;
	padding: 20rpx 30rpx;
	font-size: 28rpx;
	color: #666;
}

.spec-item.active {
	border-color: #ff6b6b;
	color: #ff6b6b;
	background: rgba(255, 107, 107, 0.1);
}

.spec-price {
	margin-left: 10rpx;
	font-size: 24rpx;
}

/* 商品详情 */
.detail-section {
	background: white;
	padding: 30rpx;
}

.detail-content {
	font-size: 28rpx;
	line-height: 1.6;
	color: #666;
}

/* 底部操作栏 */
.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	background: white;
	border-top: 1rpx solid #eee;
	padding: 20rpx 30rpx;
	height: 100rpx;
}

.bar-left {
	display: flex;
	align-items: center;
	flex: 1;
}

.action-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-right: 40rpx;
	position: relative;
}

.btn-icon {
	font-size: 36rpx;
	margin-bottom: 5rpx;
}

.btn-text {
	font-size: 20rpx;
	color: #666;
}

.cart-badge {
	position: absolute;
	top: -10rpx;
	right: -10rpx;
	background: #ff4757;
	color: white;
	border-radius: 20rpx;
	min-width: 30rpx;
	height: 30rpx;
	font-size: 20rpx;
	text-align: center;
	line-height: 30rpx;
}

.bar-right {
	display: flex;
	align-items: center;
}

.add-cart-btn {
	background: #ffa726;
	color: white;
	border: none;
	border-radius: 50rpx;
	padding: 20rpx 30rpx;
	font-size: 28rpx;
	margin-right: 20rpx;
}

.buy-now-btn {
	background: #ff6b6b;
	color: white;
	border: none;
	border-radius: 50rpx;
	padding: 20rpx 40rpx;
	font-size: 28rpx;
}
</style>